<template>
  <div class="g-bd">
    <div class="pgsrch">
      <input
        type="text"
        v-model="serkey"
        @keyup.enter="getfindresult"
      >
      <a
        href="#"
        class="iconfont icon-soushuo-copy"
      ></a>
      <div class="lstlay"></div>
    </div>
    <div class="m-search">
      <div class="snote">
        搜索“{{serkey}}”，找到 {{songtolnum}} {{nowlan}}
      </div>
      <ul class="mytabs">
        <li
          v-for="(item,index) in srList"
          :key="index"
          @click="addCls(index)"
        >
          <router-link
            :to="{path:'/srres/songs',query: {serkey:serkey,type:item.type}}"
            class="trt"
          >{{item.cnname}}</router-link>
        </li>
      </ul>
      <router-view @findcount="gettolcount"></router-view>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      srList: [
        { cnname: '单曲', enname: 'songs', type: 1, dw: '首歌曲' },
        { cnname: '歌手', enname: 'artists', type: 100, dw: '个歌手' },
        { cnname: '专辑', enname: 'albums', type: 10, dw: '张专辑' },
        { cnname: '视频', enname: 'video', type: 1014, dw: '个视频' },
        { cnname: '歌词', enname: 'songs', type: 1006, dw: '个歌词' },
        { cnname: '歌单', enname: 'playlists', type: 1000, dw: '个歌单' },
        { cnname: '声音主播', enname: 'djradio', type: 1009, dw: '个节目' },
        { cnname: '用户', enname: 'userprofiles', type: 1002, dw: '个用户' },
      ],
      // 用户输入的搜索词key
      serkey: '',
      type: 1,
      songtolnum: 0,
      nowtype: 0,
      nowlan: ''
    }
  },
  created () {
    this.serkey = this.$route.query.srkey
  },
  watch: {
    '$route.params.srkey': function (newVal, oldVal) {
      console.log(newVal + "---" + oldVal);
      if (newVal !== undefined) {
        this.serkey = newVal
      }

    }
  },
  methods: {
    addCls (ni) {
      var lis = document.getElementsByClassName('trt');
      for (let i = 0; i < lis.length; i++) {
        lis[i].classList.remove("z-slt");
      }
      document.getElementsByClassName('trt')[ni].classList.add("z-slt");

    },
    // 输入框按下回车键
    getfindresult () {
      this.$router.push({ path: '/srres/songs', query: { seakey: this.serkey, type: 1 } })
    },
    gettolcount (val1, val2) {
      // console.log(val)
      this.songtolnum = val1
      this.nowtype = val2
      // console.log('!!!!!!!!!!!!!!!!!!')
      // console.log(this.nowtype)
      // 找到此type对应的cnname      
      let num = this.srList.findIndex((item) => item.type == this.nowtype);
      this.nowlan = this.srList[num].dw
    }
  }
}
</script>

<style lang="less" scoped>
.g-bd {
  font-size: 12px;
  color: #333;
  margin-top: 0;
  width: 980px;
  min-height: 700px;
  // height: 700px;
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  padding: 40px;
  .pgsrch {
    width: 420px;
    height: 40px;
    margin: 0 auto;
    a {
      text-decoration: none;
      display: inline-block;
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 0 5px 5px 0;
      font-size: 12px;
    }
    input {
      font-size: 12px;
      width: 340px;
      height: 30px;
      margin: 12px 0 0 20px;
      padding: 0;
      padding-left: 10px;
      background: #fff;
      border: none;
      border-radius: 5px 0 0 5px;
      background-color: #e7e7e7;
    }
  }
  .m-search {
    .snote {
      margin: 28px 0 17px;
      color: #999;
    }
    .mytabs {
      margin: 0;
      padding: 0;
      height: 39px;
      border: 2px solid #ccc;
      background-color: #f7f7f7;
      display: flex;
      justify-content: left;
      align-items: center;
      li {
        list-style: none;
        display: flex;
        justify-content: left;
        align-items: center;
        height: 39px;
        font-size: 14px;
        a {
          color: #333;
          text-decoration: none;
          display: inline-block;
          width: 108px;
          height: 39px;
          line-height: 39px;
          text-align: center;
          font-size: 14px;
        }
      }
      li:hover {
        border-top: 2px solid red;
      }
      .z-slt {
        background-image: url(../../assets/image/tab.png);
        background-position: left -90px;
      }
    }
    .musiclist {
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #333;
      margin-top: 20px;
      a {
        text-decoration: none;
        font-size: 12px;
        color: #333;
      }
      li {
        padding: 10px 10px 8px 18px;
        border: 1px solid #fff;
        display: flex;
        justify-content: left;
        align-items: center;
        background-color: #fff;
        .td {
          margin-right: 5px;
          .icn {
            margin-right: 8px;
            margin-bottom: 3px;
          }
        }
        .w0 {
          width: 370px;
        }
        .w1 {
          width: 15%;
          margin-right: 12px;
        }
        .w2 {
          width: 18%;
          margin-right: 12px;
          min-height: 16px;
        }
        .icons {
          visibility: hidden;
        }
        .iconfa:hover {
          .icons {
            visibility: visible;
          }
        }
      }
      li:odd {
        background: #f7f7f7;
        border-color: #f7f7f7;
      }
    }
  }
}
</style>
